<template>
  <div>
    <div class="relative overflow-y-hidden shadow-md" id="checkTable">
      <table
        class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border-spacing-0 border-collapse overflow-y-hidden"
        style="border:1px solid var(--grid);"
      >
        <!-- <div class="overflow-y-hidden w-[791px] bg-[#374151]"> -->
        <thead
          class="text-xs uppercase bg-[var(--theme-search-bg)] dark:bg-[#374151] dark:text-gray-400 text-[#9CA3AF]"
        >
        <tr class="flex items-center" style="border-bottom:1px solid var(--grid)">
          <th scope="col" class="py-4 w-[40px] flex justify-center items-center">
            <div class="flex items-center">
              <input
                id="checkbox-all-search"
                type="checkbox"
                class="w-4 h-4 bd-4b text-blue-600 bg-[var(--theme)] border-[var(--grid)] rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
              />
              <label for="checkbox-all-search" class="sr-only">checkbox</label>
            </div>
          </th>
          <th
            scope="col"
            class="w-[154.5px] h-[50px] text-left s4k:px-2 px-4 py-3 box-border flex flex-col justify-center"
          >CAMERA ID</th>
          <th
            scope="col"
            class="w-[154.5px] h-[50px] text-left px-4 py-3 box-border flex flex-col justify-center"
          >IP ADDRESS</th>
          <th
            scope="col"
            class="w-[88px] h-[50px] text-left px-4 py-3 box-border flex flex-col justify-center"
          >PORT</th>
          <th
            scope="col"
            class="w-[144px] h-[50px] text-left px-4 py-3 box-border flex flex-col justify-center"
          >Brand</th>
          <th
            scope="col"
            class="w-[144px] h-[50px] text-left px-4 py-3 box-border flex flex-col justify-center"
          >Model</th>
          <th
            scope="col"
            class="w-[64px] h-[50px] text-left px-4 py-3 box-border flex flex-col justify-center"
          >COST</th>
        </tr>
        </thead>
        <!-- </div> -->
        <div class="h-[284px] overflow-y-auto" id="tbody">
          <tbody>
          <tr
            class="h-[50px] border-b dark:bg-[var(--grid)] dark:border-[var(--grid)] hover:bg-[var(--theme-table-hover)] dark:hover:bg-[var(--grid)]"
            style="border-bottom:1px solid var(--grid)"
            v-for="(item,index) in 9"
            :key="index"
          >
            <td class="w-[40px] h-8 flex justify-center py-4 items-center">
              <div class="flex items-center">
                <input
                  id="checkbox-table-search-1"
                  type="checkbox"
                  class="w-4 h-4 bd-4b text-blue-600 bg-[var(--theme)] border-[var(--grid)] rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                />
                <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
              </div>
            </td>
            <td
              scope="row"
              class="text-[14px] w-[154.5px] py-4 px-4 s4k:px-2 text-left box-border text-[var(--theme-font-color)] font-medium whitespace-nowrap dark:text-[var(--theme-font-color)]"
            >Camera 043</td>
            <td
              class="w-[154.5px] py-4 px-4 text-left box-border text-[14px] font-normal text-[#9CA3AF]"
            >192.503.182.41</td>
            <td
              class="w-[88px] py-4 px-4 text-left box-border text-[14px] font-normal text-[#9CA3AF]"
            >080</td>
            <td
              class="w-[144px] py-4 px-4 text-left box-border text-[14px] font-normal text-[#9CA3AF]"
            >Huawei</td>
            <td
              class="w-[144px] py-4 px-4  text-left box-border text-[14px] font-normal text-[#9CA3AF]"
            >XM-536</td>
            <td
              class="w-[64px] py-4 px-4 text-right box-border text-[14px] font-normal text-[#9CA3AF]"
            >1</td>
          </tr>
          </tbody>
        </div>
      </table>
    </div>
    <div
      class="w-[793px] h-[66px] bd-4b px-4 flex items-center justify-between box-border py-3"
    >
      <div>
        <span class="text-[14px] font-medium text-[#9CA3AF]">9 cameras selected</span>
      </div>
      <div
        class="w-[280px] h-[66px] flex items-center justify-between flex-wrap"
      >
        <div class="h-[40px]">
          <div class="w-[280px] flex items-center justify-between">
            <div>
              <span class="uppercase text-[12px] font-bold text-[#9CA3AF]">TOTAL</span>
            </div>
            <div>
              <span class="text-[14px] font-medium text-[var(--theme-font-color)]">9 Credits</span>
            </div>
          </div>
          <div class="w-[280px] flex items-center justify-between">
            <div>
              <span
                class="uppercase text-[12px] font-bold text-[#9CA3AF]"
              >Available Credits</span>
            </div>
            <div>
              <span class="text-[14px] font-medium text-[#9CA3AF]">9 Credits</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="w-[793px] h-[67px] flex items-center justify-end mt-4"
    >
      <div>
        <button
          id="dropdownDefaultButton"
          data-dropdown-toggle="dropdown"
          class="w-[160px] h-[41px] text-white bg-[#1C64F2] focus:ring-4 font-medium rounded-lg text-[14px] px-5 py-2.5 text-center inline-flex items-center justify-center cursor-pointer s4k:rounded-[8px]"
          type="button"
        >
          <span
            class="text-[14px] text-white font-Medium font-[400] ml-2"
          >Add Camera</span>
        </button>
        <div
          class="w-[160px] text-center text-[12px] font-normal text-[#9CA3AF] mt-2"
        >Use 9/55 credits</div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "CheckTable"
});
</script>
<style lang="scss" scoped>
#modal {
  :deep(.max-w-md) {
    width: 400px !important;
    height: 526px !important;
  }
  :deep(.bg-white) {
    border: 1px solid var(--grid);
    background-color: var(--theme) !important;
  }
  :deep(.p-6) {
    padding: 21px !important;
    border-top: 1px solid var(--grid);
  }
}
@media screen and (min-width: 3840px) {
  input[type="checkbox"] {
    font-size: 18px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }
}
//@media screen and (min-width: 3840px) {
//  #checkTable {
//    :deep(input) {
//      padding: 15px 10px;
//      height: 32px !important;
//      background-color: var(--theme);
//      border: solid var(--grid) 1px;
//      font-size: 28px;
//      font-family: Medium;
//      color: var(--theme-font-color);
//      &:checked {
//        background-color: #1a56db;
//        border-color: #1a56db;
//      }
//    }
//  }
//}
#tbody::-webkit-scrollbar {
  width: 4px;
  height: 116.13px;
}
#tbody::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: var(--grid);
}
#tbody::-webkit-scrollbar-track {
  width: 4px;
  height: 540px;
  background: var(--theme-right);
}
.bd-4b {
  border: 1px solid var(--grid);
}
button{
  box-shadow: none !important;
}
</style>
